<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>左右切换显示图片</title>
    <link rel="stylesheet" type=text/css href="js/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type=text/css href="js/simple-line-icons/simple-line-icons.min.css" />
    <link rel="stylesheet" type=text/css href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <link rel="stylesheet" type=text/css href="css/bidirection-switch.css" />
    <script type="text/javascript" src="js/jquery.min..js"></script>
    <script type="text/javascript" src="js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="col-md-12 bidirection-switch">
        <div class="arrow go-prev">
            <a href="#">
                <i class="fa fa-chevron-left hide"></i>
            </a>
        </div>

        <ul class="nav navbar-nav" id="ulDiv">
            <li class="active nav-item">
                <a href="#gwbl" data-toggle="tab">
                    <img class="nav-fa gwbl" src="images/gwbl.png" alt="">
                    <span class="title">公文办理</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#jstx" data-toggle="tab">
                    <img class="nav-fa jstx" src="images/jstx.png" alt="">
                    <span class="title">通知公告</span>
                </a>
            </li>
            <li class="nav-item">
                    <a href="#szjm" data-toggle="tab">
                        <img class="nav-fa szjm" src="images/szjm.png" alt="">
                        <span class="title">督察督办</span>
                    </a>
            </li>
            <li class="nav-item">
                <a href="#tzgg" data-toggle="tab">
                    <img class="nav-fa tzgg" src="images/tzgg.png" alt="">
                    <span class="title">资料交换</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#xzsp" data-toggle="tab">
                    <img class="nav-fa xzsp" src="images/xzsp.png" alt="">
                    <span class="title">短信平台</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#zwap" data-toggle="tab">
                    <img class="nav-fa zwap" src="/images/zwap.png" alt="">
                    <span class="title">邮件</span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#zxzj" data-toggle="tab">
                    <img class="nav-fa zxzj" src="/images/zxzj.png" alt="">
                    <span class="title">专项资金</span>
                </a>
            </li>
        </ul>

        <div class="arrow go-next">
            <a href="#">
                <i class="fa fa-chevron-right hide"></i>
            </a>
        </div>
    </div>


    <script type="text/javascript">

        $(function () {
            var lilen = $("#ulDiv li").length;
            if (lilen > 3) {
                //  $(".fa-chevron-left")
                $(".fa-chevron-right").removeClass("hide");
                $("#ulDiv li:gt(2)").addClass("hide");
            }
            //点击右箭头
            $(".fa-chevron-right").click(function () {

                var curli = $("#ulDiv li:visible");
                var curli_first = $("#ulDiv li:visible")[0];
                var curli_last = $("#ulDiv li:visible")[2];
                console.log($(curli_last).nextAll())
                console.log($(curli_last).nextAll().filter(":lt(3)").length);
                $(curli_last).nextAll().filter(":lt(3)").removeClass("hide");
                curli.addClass("hide");
                //点击图标变更后，重新获取当前可视li标签
                var after_curli_first = $("#ulDiv li:visible")[0];
                var after_curli_last = $("#ulDiv li:visible")[2];
                console.log(after_curli_first);
                console.log(after_curli_last);
                if ($(after_curli_last).nextAll().length > 0) {
                    $(".fa-chevron-right").removeClass("hide");
                } else {
                    $(".fa-chevron-right").addClass("hide");
                }

                if ($(after_curli_first).prevAll().length > 0) {
                    $(".fa-chevron-left").removeClass("hide");
                } else {
                    $(".fa-chevron-left").addClass("hide");
                };

            });
            //点击左箭头
            $(".fa-chevron-left").click(function () {
                var curli = $("#ulDiv li:visible");
                var curli_first = $("#ulDiv li:visible")[0];
                var curli_last = $("#ulDiv li:visible")[2];
                console.log($(curli_last).nextAll().filter(":lt(3)").length);
                $(curli_first).prevAll().filter(":lt(3)").removeClass("hide");
                curli.addClass("hide");
                //点击图标变更后，重新获取当前可视li标签
                var after_curli_first = $("#ulDiv li:visible")[0];
                var after_curli_last = $("#ulDiv li:visible")[2];
                console.log(after_curli_first);
                console.log(after_curli_last);
                if ($(after_curli_last).nextAll().length > 0) {
                    $(".fa-chevron-right").removeClass("hide");
                } else {
                    $(".fa-chevron-right").addClass("hide");
                }

                if ($(after_curli_first).prevAll().length > 0) {
                    $(".fa-chevron-left").removeClass("hide");
                } else {
                    $(".fa-chevron-left").addClass("hide");
                };
            });

        })
    </script>
</body>

</html>